<template>
    <div class="box">
        <div><img @click="$router.go(-1)" src="/img/tx/back.png" alt=""></div>
            <ul>
                <li @click="detail(v.educationCourseId)" class="content" v-for="(v,i) in arr" :key="i">
                    <img :src="v.image" alt="">
                    <p>{{v.title}}</p>
                </li>
            </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pageIndex:0,
            pageSize:10,
            keyword:'',
            arr:[]
        }
    },
    created(){
        this.getParams();
        this.spfllist()
    },
    activated:function(){
        this.getParams();
        this.spfllist()
    },
     watch: {
    // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
    '$route': 'getParams'
    },
       methods:{
        spfllist:function(){
            this.axios({
                url:"https://api.hongbeibang.com/search/getMoreCourse?_t=1585393996184&csrfToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOjAsImV4cCI6MTc3MTU2NjMxNCwiaWF0IjoxNTgyMTc3NTE0fQ.iBmGtQ0fasTTaSuApywmN6Ms0aNYwUvkGLoXX6V6hO8",
                method:"get",
                params: {
                    pageIndex:this.pageIndex,
                    pageSize:this.pageSize,
                    keyword:this.keyword
                }
            }).then((ok)=>{
                this.arr=ok.data.data.search.list.course.data
                window.console.log(this.arr)
            })
        },
         getParams:function(){
            // 取到路由带过来的参数
            var keyword= this.$route.query.keyword;
            // 将数据放在当前组件的数据内
            this.keyword = keyword
           window.console.log(this.keyword)
      },
      detail(e){
          this.$router.push({
               path:"/detail",
               query:{
                   id:e   
               }
            })
      }
    }
}
</script>
<style scoped>
    .box{width:90%;margin:0.2rem auto;flex-wrap: wrap;}
    .content{display: flex;width: 100%;justify-content:flex-start;}
    .content img {width:1.2rem;margin:0.05rem ;}
    .content p {padding: 0.05rem; font-weight: bold;font-size: 0.12rem;}
</style>